<template>
    <div>
    <fieldset>
      <legend>学生增加</legend>
      <div>
          <label>姓名</label>
          <input v-model="formData.name">
      </div>
      <div>
          <label>电话</label>
          <input v-model="formData.mobile">
      </div>
      <div>
          <label>专业</label>
          <input v-model="formData.major">
      </div>
      <div>
          <button @click="handleInsert">增加</button>
      </div>
    </fieldset>
    <h2>学生列表</h2>
    <sub-list :model-value="tableData" @send-data="handleSendData"></sub-list>
</div>
  </template>
  
  <script>
  import SubList from "./sub-list.vue";

  export default {
      components: {SubList},
      data() {
          return {
              tableData: [],
              formData: {}
          }
      },
      methods: {
          handleInsert() {
              this.tableData.push({...this.formData});
          },
          handleSendData(payload) {
            // console.log(payload);
            // Object.assign(this.formData,payload);

            // this.formData.name = payload.name;
            // this.formData.mobile = payload.mobile;
            // this.formData.major = payload.major;

            this.formData = payload;
          }
      }
  
  }
  </script>
  
  <style>
  
  </style>